<template>
  <div class="container">
    <div class="header">
      <div class="logo" @click="$router.push('/home')">
        <img :src="titleImg" alt="">
      </div>
      <div class="nav" v-if="titleShow">
        <div class="navItem" @click="navClick(0, '/home')">
          <div class="iconfont icon-home headerIcon"></div>
          <div class="text">首页</div>
        </div>
        <div class="navItem" :class="{'showNavBg': navItemIndex === index}" v-for="(item,index) in this.menuData" :key="index" @click="navClick(index, item.path)">
          <div class="headerIcon" :class="'iconfont icon-' + item.icon">
          </div>
          <div class="text">{{item.name}}</div>
        </div>
        <div class="userInfo" style="margin-left: 20px">
          <span style="color: white;font-size: 18px">{{this.user.userName}}</span>
          <i class="userLine"></i>
          <div class="userClose" @click="clear">
            <img src="../assets/img/header/tuichu.png" alt="" style="height: 21px;width: 21px"><span style="color: white;font-size: 18px;margin-left: 5px">退出</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  
  data () {
    return {
      showNavBg: false,
      navItemIndex: 0,
      menuPath: [],
      menuData: [],
      titleShow:false,
      titleImg:require('../assets/img/header/logo.png'),
      user:{}
    }
  },
  created () {
    let index = ''
    if(localStorage.getItem('user')){
      index = JSON.parse(localStorage.getItem('navItemIndex'))
      this.user = JSON.parse(localStorage.getItem('user'))
      this.titleShow = true;
    }
    
    this.navItemIndex = index ? index : 0
    this.initMenu()
  },
  methods: {
    clear: function () {
      window.localStorage.clear()
      this.$router.push({path: '/'})
    },
    navClick (index, path) {
      this.navItemIndex = index
      if (path === '/close') {
        this.clear()
      } else if (path === '/home') {
        this.$router.push({path: '/home'})
      } else {
        this.$emit('showLoading', path)
        this.setBtnCode(this.menuData[index].children)
        localStorage.setItem('navItemIndex', index)
        this.$router.push(`${path}`)
      }
    },
    initMenu () {
      let data = JSON.parse(localStorage.getItem('headerMenu'))
      if (data) {
        this.menuData = data
        let children = data[this.navItemIndex].children
        this.setBtnCode(children)
      }
    },
    setBtnCode (data) {
      let permissionBtn = {}
      if (data) {
        data.forEach(item => {
          if (item.type === 1 && item.code) {
            this.$set(permissionBtn, item.code, true)
          }
        })
      }
      localStorage.permissionBtn = JSON.stringify(permissionBtn)
    }
  }
}
</script>

<style lang="less" scoped>
.userLine{
  display: inline-block;
  height: 21px;
  width: 1px;
  background: rgba(0, 255, 255, 1);
  margin: 0 15px;
}
.userInfo,.userClose{
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.container{
  position: fixed;
  width: 100%;
  min-width: 1450px;
  height:110px;
  box-sizing: border-box;
  /*box-shadow:0px 2px 11px 0px rgba(0,129,177,0.25);*/
  box-shadow:0px 3px 21px 0px rgba(0,129,177,0.25);
  background-repeat: no-repeat;
  .header{
    margin-left: 48px;
    margin-right: 40px;
    .logo{
      cursor: pointer;
      float: left;
      /*display: inline-block;*/
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      /*height: 54px;*/
      /*width: 594px;*/
      img{
        height: 100%;
        width: 100%;
      }
    }
    .nav{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 40px;
      .headerIcon{
        font-size: 40px;
        color: #02F0FE;
      }
      .navItem{
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        padding: 10px 15px;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-left: 5px;
        &:hover{
          -webkit-box-shadow: inset 0 0 15px #00f5ff;
          box-shadow: inset 0 0 15px #00f5ff;
        }
        &.showNavBg{
          -webkit-box-shadow: inset 0 0 15px #00f5ff;
          box-shadow: inset 0 0 15px #00f5ff;
        }
      }
      .text{
        font-size:14px;
        font-weight:400;
        color:rgba(255,255,255,1);
        margin-top: 4px;
      }
      .img{
        height: 42px;
        width: 42px;
        margin-bottom: 10px;
        img{
          height: 100%;
          width: 100%;
        }
      }
    }
  }
}
</style>
